<template>
  <div class="byplus">
    <!-- 泊寓ING -->
    <van-nav-bar
      title="优选户型"
      left-arrow
      @click-left="onClickLeft"
      class="bar"
    />
    <van-row style="font-size: 15px">
      <van-col span="8" class="quanbu" style="text-align: center">全部区域<img src="/images/xiaosanjiaodown.png" />
      </van-col>
      <van-col span="8" style="text-align: center">离我最近</van-col>
      <van-col span="8">
        <div class="paixu"><span style="margin-right:4px;">租金排序</span>
          <div class="arr">
            <div class="arrUp"></div>
            <div class="arrDown"></div>
          </div>
        </div>
      </van-col>
    </van-row>
    <!-- 小标签 -->
    <!-- 小标签 -->
    <!-- 房子详情 -->

    <van-card :desc="item.boyu_qstore" :title="item.boyu_qhintroduce" :thumb="item.boyu_qhphoto"
      @click="jumpTo(item.boyu_quid)"
      v-for="(item, index) of boyu_hx"
      :key="index">
      <template #tags>
        <div class="jiagep">
          <!-- class="julispan" -->
          <p class="pss">{{item.boyu_quantity}}</p>
          <p class="pss">{{item.boyu_qarea}}</p>
          <p class="poss"><span class="jiage">{{ item.boyu_qhprice.slice(0, -3) }}</span>&nbsp;<span class="jiage_aa">元/月</span></p>
        </div>
      </template>
    </van-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      boyu_hx: []
    };
  },
  mounted() {
    this.axios.get("/hx").then(res => {
      this.boyu_hx = res.data.results;
    });
  },
  methods: {
    jumpTo(kw) {
      this.$router.push({
        path: "/detail",
        query: {
          hid: kw
        }
      });
    },
    onClickLeft() {
      this.$router.push("/");
    }
  }
};
</script>
<style scoped>
.byplus {
  /* padding-left: 15px;
  padding-right: 15px; */
  margin-bottom: 30px;
  margin-top: 60px;
}
.bar {
  width: 100%;
  height: 50px;
  position: fixed;
  top: 0;
  left: 0;
}
.van-card__thumb {
  width: 118px;
  height: 84px;
}

.van-card__title {
  font-weight: bolder;
}

.van-tag {
  margin-top: 3px;
}

.jiagep {
  margin-top: 5px;
  font-size: 13px;
  font-weight: 600;
}

.jiage {
  color: burlywood;
  font-size: 18px;
  position: absolute;
  right: 0;
  padding-right:40px;
}
.jiage_aa{
  position: absolute;
  right: 0;
}
.julispan {
  /* padding-left: 100px; */
  float: right;
  color: #888;
}

.julispan > img {
  vertical-align: middle;
}
.paixu {
  float: right;
}
.quanbu img {
  width: 18%;
  vertical-align: middle;
}

.arr {
  width: 10px;
  float: right;
  padding-right: 25px;
}
.pss{
  margin-top:-1px;
  margin-bottom:-1px;
  color:#555;
  font-weight:0;
}
.arrUp {
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-bottom-color: #ccc;
  cursor: pointer;
}

.arrDown {
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-top-color: #ccc;
  margin-top: 3px;
  cursor: pointer;
}
.poss{
  position: relative;
  padding-bottom:1px;
}
</style>
